<template>
  <div id="Base" class="company-detail pt116">
    <div class="company-detail__warp">
      <div class="padding-tb-15">
        <Breadcrumb separator="">
          <BreadcrumbItem>当前位置</BreadcrumbItem>
          <BreadSeparator>:</BreadSeparator>
          <BreadcrumbItem><a href="/">首页</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem><a href="/public/matter/aptNoticeNotice">信息公开</a></BreadcrumbItem>
          <BreadSeparator>></BreadSeparator>
          <BreadcrumbItem>企业资质申请详情</BreadcrumbItem>
        </Breadcrumb>
      </div>
			<div class="notice-detail__header">

        <div class="yellow__header">
          <span class="t1">{{ detail.compName }}</span> <i class="t2">{{ detail?.apyQualItemName }} - {{ detail?.bitemName }}</i>
          <span class="t3 pointer" @click="notice"><MailOutlined /> 投诉举报</span>
        </div>
        <div class="ban">
          <Descriptions :column="2" bordered>
            <DescriptionsItem label="企业名称">{{ detail.compName }}</DescriptionsItem>
            <DescriptionsItem label="统一社会信用代码">{{ detail?.compCreditCode }}</DescriptionsItem>
            <DescriptionsItem label="企业法人">{{ detail?.compCeoName }}</DescriptionsItem>
            <DescriptionsItem label="申请类型">{{ detail?.bitemName }}</DescriptionsItem>
            <DescriptionsItem label="申请资质项">{{ detail?.apyQualItemName }}</DescriptionsItem>
            <DescriptionsItem label="企业所在地">{{ detail?.regionCodeName }}</DescriptionsItem>
            <DescriptionsItem label="公示日期" :span="2">{{ parseTime( detail?.pubSdate ) }} ~ {{ parseTime( detail?.pubEdate ) }}</DescriptionsItem>
          </Descriptions>
        </div>
			</div>

      <section class="mb20">
        <Main></Main>
      </section>
		</div>
  </div>
</template>

<script lang="ts">
import {defineComponent, onMounted, provide, ref} from 'vue';
import { Breadcrumb , Descriptions ,  notification} from "ant-design-vue";
import { MailOutlined } from '@ant-design/icons-vue';
import {useRoute} from "vue-router";
import { getQualDetailApi } from "/@/api/foreign";
import { parseTime } from "/@/utils";
import { Main  } from './src/index';
export default defineComponent({
	components: {
    Breadcrumb, BreadcrumbItem: Breadcrumb.Item, MailOutlined ,
    BreadSeparator: Breadcrumb.Separator,Descriptions,
    DescriptionsItem:Descriptions.Item , Main
  },
  setup(){
    const { params } = useRoute();
    const applyId:string = params.id as string;
    const detail = ref<any>({});
    provide('applyId', applyId);
    const init = async() => {
      let{ success , data } = await getQualDetailApi({applyId});
      success && data ? detail.value = data : console.log ('接口返回错误或者data值为null')

    }
    const notice = ()=>{
      notification.info({
        message: '投诉举报方式',
        description: '请登录新疆维吾尔自治区住房和城乡建设厅官网,在厅长信箱进行实名投诉',
        duration: 6
      });
    };
    onMounted(init);
    return {
      detail , parseTime , notice
    }
  }
})
</script>

<style lang="less" scoped>
.company-detail {

  .company-detail__warp {
    width: @main-width;
    margin: 0 auto;

    .notice-detail__header {
      position: relative;
      margin-bottom: 20px;
      background: #FFF;

    }
  }
}

.yellow__header{
  width: 1200px;
  height: 60px;
  padding: 13px 20px;
  color: white;
  background: linear-gradient(90deg, #F6A043 0%, #F6A043 100%);

  .t1{
    margin-right: 10px;
    font-size: 20px;
    font-weight: bold;
  }

  .t3{
    float: right;
    padding-top: 5px;

  }
}

.ban{
  padding: 20px 30px;
}

::v-deep(.ant-descriptions){
  .ant-descriptions-item-content {
    width: 400px;
  }
}

</style>
